<template>
    <h3>可视化分析</h3>
    <div id="classify" style="width: 600px; height: 400px;margin-top: 20px;"></div>
    <div id="tatol" style="width: 600px; height: 400px;margin-top: 40px;"></div>
</template>

<script setup lang="ts">
import { totalArticle, catetoryData, classList, totalUser, petNum, totalCollect } from '../api/request'
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';

interface ClassifyItem {
    classify_text: string;
}

interface CategoryItem {
    total: number; // 根据实际类型进行修改
    // 可以添加其他属性
}


let myChart01: any;
let myChart02: any;

const classifyList = ref<ClassifyItem[]>([]);
// const classifyList = ref([]);
const articleNum = ref(0);
const CatetoryData = ref<CategoryItem[]>([]);
// const CatetoryData = ref([]);
const userNum = ref(0);
const adoption = ref(0);
const collection = ref(0);


//获取分类列表
const getClassifyListFn = async () => {
    try {
        const content = await classList();
        const { code, result } = content;
        if (code === 200) {
            classifyList.value = result;
            // console.log(classifyList.value);
        }
    } catch (error) {
        console.error("Failed to fetch classifyList:", error);
    }
};

//获取分类宠物对应的数量
const getCatetoryData = async () => {
    try {
        const content = await catetoryData();
        const { code, result } = content;
        if (code === 200) {
            CatetoryData.value = result;
            console.log(CatetoryData.value);
            
            updateChart(); 
        }
    } catch (error) {
        console.error("Failed to fetch petNum:", error);
    }
};

//获取文章数量
const getTotalArticleFn = async () => {
    try {
        const content = await totalArticle();
        const { code, result } = content;
        if (code === 200) {
            articleNum.value = result.total;
            updateChart(); // 数据更新后更新图表  
        }
    } catch (error) {
        console.error("Failed to fetch articles:", error);
    }
};

//获取用户数量
const getTotalUserFn = async () => {
    try {
        const content = await totalUser();
        const { code, result } = content;
        if (code === 200) {
            userNum.value = result.total;        
            updateChart(); // 数据更新后更新图表 
        }
    } catch (error) {
        console.error("Failed to fetch userNum:", error);
    }
};

//获取最近15天发布的领养信息
const getPetNumFn = async () => {
    try {
        const content = await petNum();
        const { code, result } = content;
        if (code === 200) {
            adoption.value = result.total;
            updateChart(); // 数据更新后更新图表 
        }
    } catch (error) {
        console.error("Failed to fetch userNum:", error);
    }
};

//获取收藏数量
const getTotalCollectFn = async () => {
    try {
        const content = await totalCollect();
        const { code, result } = content;
        if (code === 200) {
            collection.value = result.total;
        }
    } catch (error) {
        console.error("Failed to fetch collection:", error);
    }
};



const updateChart = () => {
    if (myChart01) {
        const option = {
            title: {
                text: '分类宠物数量统计'
            },
            xAxis: {
                // data值为 classifyList.value 的分类名称  
                data: classifyList.value.map(item => item.classify_text),
                axisLabel: {
                    interval: 0,
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type: 'bar',
                    // data值为 CatetoryData.value 的对应分类的宠物数量
                    data: CatetoryData.value.map(item => item.total),
                    itemStyle: {
                        color: '#91cc75',
                        barBorderRadius: 5,
                        borderWidth: 1,
                        borderType: 'solid',
                        borderColor: '#91cc75',
                        shadowColor: '#91cc75',
                        shadowBlur: 3
                    }
                }
            ]
        };
        myChart01.setOption(option);
    }
    if (myChart02) {
        const option = {
            title: {
                text: '文章、用户、收藏、领养',  
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                top: '10%',
                data: ['文章数量', '用户数量', '最近15天发布的领养信息', '收藏数量']
            },
            series: [
                {
                    type: 'pie',
                    top: '10%',
                    left: '20%',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    data: [
                        { value: articleNum.value, name: '文章数量' },
                        { value: userNum.value, name: '用户数量' },
                        { value: adoption.value, name: '最近15天发布的领养信息' },
                        { value: collection.value, name: '收藏数量' },
                    ]
                }
            ]
        };
        myChart02.setOption(option);
    }
};

onMounted(() => {
    myChart01 = echarts.init(document.getElementById('classify'));
    myChart02 = echarts.init(document.getElementById('tatol'));
    getClassifyListFn(); // 获取 classifyList
    getCatetoryData();  // 获取 petNum
    getTotalArticleFn();  // 获取 articleNum
    getTotalUserFn();  // 获取 userNum
    getPetNumFn();  // 获取 petNum
    getTotalCollectFn();  // 获取collection
});

// 在窗口大小改变时，调整图表  
window.addEventListener('resize', () => {
    myChart01 && myChart01.resize();
    myChart02 && myChart02.resize();
});

</script>